<template>
  <tr>
    <td><input type="checkbox" :checked="checked" @change="change" /></td>
    <td>{{ name }}</td>
    <td>{{ price }}</td>
    <td>
      <button @click="cut" :disabled="isDisable">-</button>
      <span>{{ num }}</span>
      <button @click="add">+</button>
    </td>
    <td>{{ price * num }}</td>
    <td>
      <button @click="del">删除</button>
    </td>
  </tr>
</template>

<script>
export default {
  props: ["name", "price", "num", "checked"],
  data() {
    return {};
  },
  computed: {
    isDisable() {
      return this.num <= 0;
    },
  },
  methods: {
    change() {
      this.$emit("changeFn", this.name);
    },
    del() {
      this.$emit("delFn", this.name);
    },
    add() {
      this.$emit("addFn", this.name);
    },
    cut() {
      this.$emit("cutFn", this.name);
    },
  },
};
</script>

<style></style>
